<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>搜索条件</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/mui.picker.min.css" />
		<script type="text/javascript" src="../js/mui.min.js" ></script>
		<script type="text/javascript" src="../js/mui.picker.min.js" ></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js" ></script>
		<script type="text/javascript" src="../js/config.js" ></script>
		<script type="text/javascript" src="../js/common.js" ></script>
	</head>
		<style>
			html, body{
				font-size: 14px;
			}
			input:optional{
				font-size: 14px;
			}
			.mui-input-group .mui-input-row label{
				width: 30%;
				text-align: center;
				padding-top: 13px;
			}
			.mui-input-group .mui-input-row span, .mui-input-group .mui-input-row input{
				width: 70%;
				padding: 0;
				display: inline-block;
			}
			.mui-input-group .mui-input-row span{
				color: #999;
				padding-top: 9px;
			}
			.mui-input-group .mui-input-row {
				margin-top: 15px;
			}
			.search{
				padding: 8px 45px;
				margin: 30px auto;
				display: block;
				font-size: 16px;
			}
			.status_tread{
				position: relative;
			}
			.status_tread img{
				position: absolute;
				top: 4px;
				right: 100px;
				
			}
		</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">搜索条件</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group" style="padding-top: 10px;padding-bottom: 20px;">
				<div class="mui-input-row">
					<label>备注信息</label>
					<input type="text" class="remark" placeholder="请输入备注信息">
				</div>
				<div class="mui-input-row">
					<label>订单号</label>
					<input type="text" class="out_order_no" placeholder="请输入订单号">
				</div>
				<div class="mui-input-row status_tread">
					<label>交易状态</label>
					<select style="font-size: 14px;width: 65%;margin-right: 5%;color: #999;" id="pay_status">
						<option value="0">请选择交易状态</option>
						<option value="1">未结算</option>
						<option value="4">已结算</option>
						<option value="5">已解冻退回</option>
					</select>
					<img src="../img/arrow.png" />
				</div>
				<div class="mui-input-row">
					<label>开始时间</label>
					<span class="btn startTime" data-options='{}'>请选择开始时间</span>
				</div>
				<div class="mui-input-row">
					<label>结束时间</label>
					<span class="btn endTime" data-options='{}'>请选择结束时间</span>
				</div>
				<button type="button" class="mui-btn mui-btn-primary search">查询</button>
			</form>
			<script>
				//选择开始和结束时间
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function(e) {
						var that=$(this);
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						var picker = new mui.DtPicker(options);
						picker.show(function(rs) {
							picker.dispose();
							that.html(rs.text+":00");
						});
					}, false);
				});
				
				//点击查询按钮开始查询
				mui("body").on("tap",".search",function(){
					var remark=$(".remark").val();
					var startTime=$(".startTime").html();
					var endTime=$(".endTime").html();
					var out_order_no=$(".out_order_no").val();
					var pay_status=($("#pay_status").val()==0)?"":$("#pay_status").val();
					if (remark!=""||startTime!="请选择开始时间"||endTime!="请选择结束时间"||out_order_no!=""||pay_status!=0) {
						mui.openWindow({
							url:"loadSearch.html",
							id:"loadSearch.html",
							extras:{
								remark:remark,
								startTime:(startTime=="请选择开始时间"?"":startTime),
								endTime:(endTime=="请选择结束时间"?"":endTime),
								out_order_no:out_order_no,
								pay_status:pay_status
							} 
						})
						return false;
					}
					mui.alert("搜索条件不能全为空"," ","关闭",function(){},"div");
				})
			</script>
		</div>
	</body>

</html>